<template>
	<view>
		<uni-nav-bar fixed status-bar="true" :border="false" title="订单"></uni-nav-bar>
		<view class="block_top" :style="{top: safeTop}">
			<view class="flex_b">
				<view class="flex_b">
					<picker mode="date" :value="date" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
					<uni-icons style="margin-left: 10rpx;" type="down"></uni-icons>
				</view>
				<view class="flex_b" style="margin-left: 20rpx;">
					<uni-data-select :clear='false' v-model="value" :localdata="range"
						@change="change"></uni-data-select>
				</view>
			</view>

			<view class="right" @click="open">
				<span>营业数据</span>
				<uni-icons type="right" color="#0CAD61"></uni-icons>
			</view>
		</view>
		<view class="ulist">
			<view class="item" v-for="(item,index) in orderlist" :key="index" @click="pagedetail(item)">
				<image src="/static/top.png" mode=""></image>
				<view class="block">
					<view class="f_l">
						<image src="/static/index/juan.png" mode=""></image>
						<view class="abs">
							<view class="t1">{{item.takeCode}}</view>
							<view class="t2">Id：{{item.id}}</view>
						</view>
					</view>
					<view class="f_r">
						<view class="f_r_1">
							<view class="tit">{{item.productName}}</view>
							<view class="">
								<span>{{item.status}}</span>
								<!-- <span>待评价</span>
								<span>已完成</span> -->
							</view>
						</view>
						<view class="flex_b" style="justify-content: space-between;">
							<view class="" style="flex: 1;">
								<view class="f_r_1 f_r_2">
									<view class="tit">x{{item.productCount}}</view>
									<!-- 		<view class="flex_b">
										<span>5.0</span>
										<uni-rate :size="18" readonly :value="3" active-color="#000" />
									</view> -->
								</view>
								<view class="f_r_3">
									<view class="price">
										<span>￥</span>{{item.orderAmount}}
									</view>
								</view>
							</view>
							<view v-if="item.status == '待取餐'" class="btn" @click.stop="openpop(item)">
								待核销
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="kong" v-if="nolist">
			<image src="/static/dkong.png" mode=""></image>
			<view class="ts">
				暂无订单
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popuphx">
				<view class="tit">核销订单</view>
				<view class="cont">请确认要对 {{uname}} 进行核销吗？</view>
				<view class="btnflex">
					<view class="btn b1" @click="close">
						取消
					</view>
					<view class="btn b2" @click="handleconfirm">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupyy" type="center">
			<view class="popup">
				<view class="item">
					<view class="text_l">订单数量</view>
					<view class="">{{shujuinfo.order_count}}</view>
				</view>
				<view class="item">
					<view class="text_l">商品数量</view>
					<view class="">{{shujuinfo.product_count}}</view>
				</view>
				<view class="item">
					<view class="text_l">订单总额</view>
					<view class="p"><span>￥</span>{{shujuinfo.order_amount}}</view>
				</view>
				<view class="item">
					<view class="text_l">退款总额</view>
					<view class="p"><span>￥</span>{{shujuinfo.refund_amount}}</view>
				</view>
				<view class="item">
					<view class="text_l">有效总额</view>
					<view class="p"><span>￥</span>{{shujuinfo.pay_amount}}</view>
				</view>
				<view class="btn" @click="close">
					关闭
				</view>
			</view>
		</uni-popup>

		<uv-tabbar :value="2" class="tab"></uv-tabbar>
	</view>
</template>

<script>
	import {
		ordersList,ordersStatistic,ordersTake
	} from '@/common/http.api.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				safeTop: uni.getStorageSync('statusBarHeight'),
				date: currentDate,
				value: '',
				range: [{
						value: '',
						text: "全部"
					},
					{
						value: "待取餐",
						text: "待取餐"
					},
					{
						value: "待评价",
						text: "待评价"
					},
					{
						value: "已完成",
						text: "已完成"
					},
					{
						value: "已失效",
						text: "已失效"
					},
					{
						value: "已取消",
						text: "已取消"
					},
				],
				params: {
					status: '',
					createTimeBegin: currentDate,
					createTimeEnd: currentDate,
					pageNum: 1,
					pageSize: 10,
				},
				orderlist: [],
				nolist: false,
				shujuinfo:{},
				uname:"",
				uid:''
			};
		},
		onShow() {
			this.params.pageNum = 1
			this.params.status = ''
			this.params.createTimeBegin = this.date
			this.params.createTimeEnd = this.date
			ordersList(this.params).then(res => {
				this.orderlist = res.rows
				let total = Math.ceil(res.total / this.params.pageSize);
				this.nolist = total == 0
			})
		},
		methods: {
			//请求列表
			getlist() {
				ordersList(this.params).then(res => {
					this.orderlist.push(...res.rows)
					let total = Math.ceil(res.total / this.params.pageSize);
					this.nolist = total == 0
				})
			},
			//日期切换
			bindDateChange(e) {
				console.log(e);
				this.params.pageNum = 1
				this.params.createTimeBegin = e.detail.value
				this.params.createTimeEnd = e.detail.value
				this.orderlist = []
				this.date = e.detail.value
				this.getlist()
			},
			//状态切换
			change(e) {
				console.log(e);
				this.params.pageNum = 1
				this.params.status = e
				this.orderlist = []
				this.getlist()
			},
			//打开营业数据
			open() {
				this.params.pageSize = 1000
				ordersStatistic(this.params).then(res=>{
					this.shujuinfo = res.data
					this.$refs.popupyy.open()
				})
			},
			close(){
				this.$refs.popupyy.close()
				this.$refs.popup.close()
			},
			openpop(item) {
				this.uname = item.productName
				this.uid = item.id
				this.$refs.popup.open()
			},
			handleconfirm(){
				ordersTake({id:this.uid }).then(res=>{
					if(res.code == 200){
						this.$refs.popup.close()
						uni.showToast({
							title:'成功核销',
							icon:'none'
						})
						this.params.pageNum = 1
						this.orderlist = []
						this.getlist()
					}
				})
			},
			
			
			
			
			pagedetail(item) {
				uni.navigateTo({
					url:`/pages/order/orderdetail?id=${item.id}`
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.kong {
		margin: 200rpx auto;
		text-align: center;

		.ts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #D1D1D6;
			margin-top: 30rpx;
		}

		image {
			width: 278rpx;
			height: 265rpx;
		}
	}

	.block_top {
		width: 750rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: sticky;
		top: 0%;
		z-index: 9;
		padding: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #000000;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.right {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #0CAD61;

			span {
				text-decoration-line: underline;
			}
		}
	}

	.ulist {
		.item {
			width: 690rpx;
			margin: 20rpx auto 30rpx;

			image {
				width: 99rpx;
				height: 32rpx;
				display: block;
				margin: 0 auto;
			}

			.block {
				width: 690rpx;
				height: 210rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				padding: 36rpx 20rpx;
				box-sizing: border-box;

				.f_l {
					position: relative;
					width: 222rpx;
					height: 131rpx;

					image {
						width: 222rpx;
						height: 131rpx;
					}

					.abs {
						position: absolute;
						width: 222rpx;
						height: 131rpx;
						text-align: center;
						top: 0%;

						.t1 {
							font-family: 'DINB';
							font-weight: bold;
							font-size: 64rpx;
							color: #000000;
							line-height: 94rpx;
						}

						.t2 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #1E703F;
							line-height: 38rpx;
						}

					}
				}

				.f_r {
					flex: 1;
					margin-left: 20rpx;

					.f_r_1 {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.tit {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}

						span {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #CE7034;
						}
					}

					.f_r_2 {
						span {
							font-family: 'DINB';
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}
					}

					.f_r_3 {
						display: flex;
						justify-content: space-between;

						.price {
							font-family: 'DINB';
							font-weight: bold;
							font-size: 40rpx;
							color: #CE7034;

							span {
								font-size: 24rpx;
							}
						}

					}

					.btn {
						width: 152rpx;
						height: 68rpx;
						background: #000000;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
						line-height: 68rpx;
						text-align: center;
						margin-top: 10rpx;
					}

				}

			}
		}
	}

	.popup {
		width: 630rpx;
		height: 620rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 60rpx 44rpx;
		box-sizing: border-box;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 46rpx;
			font-family: DIN, DIN;
			font-weight: bold;
			font-size: 28rpx;
			color: #000000;

			.text_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;
			}

			.p {
				color: #0CAE62;

				span {
					font-size: 24rpx;
				}
			}
		}

		.btn {
			width: 240rpx;
			height: 92rpx;
			background: #000000;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 92rpx;
			margin: 50rpx auto 0rpx;
		}
	}
</style>